<template>
  <div class="moneyChange">
    <div class="carFormHead">
      <van-nav-bar title="找零">
        <template #left>
          <span
            style="font-size: 30px; background-color: #06c68a; padding: 4px 0"
            @click="$router.go(-1)"
            class="tc ting-fanhui"
            >返回
          </span>
        </template>
      </van-nav-bar>
    </div>

    <div class="moneyChange1 moneyChange2" style="text-align: center">
      该车辆预支付金额剩余
    </div>
    <div
      class="moneyChange2"
      style="text-align: center; font-size: 30px; color: var(--theme-color)"
    >
      ¥{{ money || 0 }}
    </div>
    <div style="text-align: center" class="moneyChange2">是否进行找零</div>
    <div class="moneyChange3">
      <van-button
        color="linear-gradient(to right, #a7f19e, #06C68A)"
        @click="moneyChangeFn()"
        size="large"
        >找零
      </van-button>
    </div>
    <div class="moneyChange3">
      <van-button size="large" @click="moneyChangeFn">不找零</van-button>
    </div>
  </div>
</template>

<script>
import { applyChange } from "@/api/modules/order";
import { Toast } from "vant";
import { outSettle } from "@/api/modules/home";

export default {
  name: "moneyChange",
  data() {
    return {
      money: this.$route.query.money,
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
  },
  methods: {
    async moneyChangeFn() {
      const toast1 = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "结算中",
      });
      await outSettle({
        ...this.$route.query,
        tollmanId: this.userInfo.id,
      });
      const { code } = await applyChange({
        parkingRecordId: this.$route.query.parkingRecordId,
      });
      if (code === 200) {
        Toast("结算成功");
        toast1.clear();
        setTimeout(() => {
          this.$router.go(-2);
        }, 500);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.moneyChange {
  width: 100%;
  height: 100vh;
  font-size: 25px;

  .moneyChange1 {
    margin-top: 50px;
  }

  .moneyChange2 {
    font-weight: bold;
  }

  .moneyChange3 {
    padding: 10px 16px;
    box-sizing: border-box;
  }
}
</style>
